#back {
    background-color: #2b80d9;
    height: 50vh;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}

#flash {
    background-color: #fbfaf7;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .flash-box {
        width: 80%;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        padding-bottom: 5vw;

    }



    .flash-left {
        display: flex;
        flex-wrap: wrap;

        width: 70%;

        h1 {
            font-size: 40px;
            font-weight: bold;
            color: #0078d7;
            margin-top: 15px;
        }

        p {
            font-size: 25px;
            color: #666666;
            margin-top: 15px;

        }

        .flash-boxx {
            width: 40%;
            display: flex;
            flex-wrap: nowrap;
            flex-direction: row;
            justify-content: space-between;

        }

        .flash-a {
            display: flex;
            margin-top: 5vw;
            justify-content: center;
            align-items: center;







            h3 {
                font-size: 20px;

                color: #333333;
                margin-left: 5px;
            }

            h4 {
                font-size: 10px;
                color: #babab8;
                margin-left: 5px;
            }

        }



    }

    .flash-right {
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;



        img {
            width: 100%;
            height: 100%;
        }
    }




}

#layabox {
    background-color: #ffffff;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .layaboxx {
        margin-top: 5vw;
        margin-bottom: 5vw;
        width: 80%;

        display: flex;

        .laya-left {
            width: 40%;
            display: flex;
            justify-content: center;
            align-items: center;


        }

        .laya-right {
            width: 60%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-content: center;

            h1 {
                font-size: 26px;
                color: #8fc31f;
                font-weight: bold;

            }

            .layaa {
                margin-top: 10px;
                display: flex;
                align-items: center;

                .layaa-b {
                    margin-left: 5px;
                    color: #bdbdbd;
                }

            }


        }


    }
}

#family {
    background-color: #0079d7;
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 10vw;



    .family-center {
        width: 80%;
        margin-top: 5vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;


        h3 {
            font-size: 30px;
            color: #ffffff;
            text-align: center;
        }

        .family-box {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-around;
            width: 100%;

            .a {
                display: flex;
                margin-top: 5vw;
                margin-left: 5vw;
                align-items: center;
                width: 40%;

                .aa {
                    width: 30%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                }

                .ab {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    justify-content: center;
                    margin-left: 5px;

                    h3 {
                        font-size: 30px;
                        color: #ffffff;
                    }

                    h4 {
                        font-size: 14px;
                        color: #ffffff;
                    }
                }

            }

        }


    }





}

#yinqing {
    background-color: #ffffff;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .text {
        width: 80%;
        height: 40px;
        display: flex;
        margin-top: 5vw;
        justify-content: space-between;

        .text-left {
            font-size: 32px;
            color: #2a2a2a;


        }

        .text-right {
            display: flex;
            font-size: 14px;
            color: #666666;
            align-items: flex-end;


        }

    }

    .yinqing-box {
        display: flex;
        width: 80%;
        margin-top: 8vw;
        padding-bottom: 5vw;
        align-items: center;


        .yinqing-left {
            width: 30%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .yinqing-right {
            width: 70%;
            margin-left: 3vw;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;






            .large {

                display: flex;
                flex-direction: row;
                justify-content: space-around;
                flex-wrap: wrap;
                width: 15%;
                margin-bottom: 1vw;



                .box {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin-right: 2vw;
                }
            }
        }
    }


}

#hezuo {
    background-color: #c3c3c3;
    padding-top: 3vw;
    padding-bottom: 5vw;
    display: flex;
    justify-content: center;

    .hezuo-box {
        width: 80%;


        .title {
            font-size: 30px;

            span {
                font-size: 11px;
                color: #5e5c5c;
                font-family: OSLight;
            }
        }

        .logobox {
            margin-top: 2vw;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            .logo {
                width: 15%;
                height: 65px;

                img {
                    border-radius: 3px;
                    
                }
            }
        }
    }

}

#botton {
    background-color: #3b3b3b;
    width: 100%;
   
    display: flex;
    justify-content: center;
    align-items: center;

    .botton-center {
        width: 80%;
        height: 10vw;

        display: flex;

        .botton-left {
            width: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #91939a;

            .infotmation {
                display: flex;
                flex-direction: row;
                align-items: center;


                .text {
                    margin-right: 2vw;
                }

                .down {
                    padding-left: 1vw;
                    margin-top: 1vw;
                }
            }

        }


    }


    .botton-right {
        width: 50%;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;

        .botton-box {
            margin-left: 2vw;
        }
        .botton-wechat {
            margin-left: 2vw;
            .erweima{
                display: none;
                

            }
            &:hover{
                .erweima{
                    display: block;
                    position: absolute;
                    transform: translate(-7.5vw,-35vh);
                   
                    
                    
                   
                    
                }
            }
        }

        



    }
}

@media screen and (max-width: 1024px) {
    #flash {
        .flash-box {
            .flash-left {
                .flash-boxx {
                    width: 100%;

                }
            }

        }

    }

    #family {
        .family-center {
            .family-box {
                a {
                    width: 100%;



                }
            }
        }
    }
    
}

@media screen and (max-width: 768px) {
    #flash {
        .flash-box {
            .flash-left {
                width: 100%;
            }

            .flash-right {
                display: none;
            }
        }









    }

    #family {
        .family-center {
            .family-box {
                .a {
                    width: 100%;
                }
            }

        }
    }
   

}
























@media screen and (max-width: 1024px) {}

@media screen and (min-width: 768px) {
    #back {
        height: 60vw;
        width: 100%;
    }

    #flash {
        height: 70vw;
    }

    #layabox {
        .layaboxx {
            .laya-left {
                width: 30%;
            }

            .laya-right {
                width: 70%;
            }
        }
    }

    #family {
        #family {
            background-color: #0079d7;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

    }
}

@media screen and (max-width: 375px) {}